<template>
    <div>
        <transition name="fade">
            <div class="food" v-if="showFoodFlag">
                <div class="content">
                    <div class="header_pic">
                        <img v-lazy="food.image" :alt="food.name">
                        <div class="desc">{{food.info}}美味粥</div>
                        <div >
                            <i class="iconfont icon--zuo" @click="toggle"></i>
                        </div>
                    </div>
                    <div class="text">
                        <div class="food_name" >{{food.name}}粥</div>

                        <p class="sell_text"> <span>月销售{{food.sellCount}}份</span>&nbsp&nbsp&nbsp<span>好评率{{food.rating}}</span> </p>
                        <p class="color">￥{{food.price}}</p>
                        <div class="cartControl">
                            <CartControl :food="food"></CartControl>
                        </div>
                    </div>
                </div>
                <div class="cover" @click="toggle"></div>
            </div>
        </transition>

    </div>

</template>

<script>
    import CartControl from '../CartControl/CartControl.vue'
    export default {
        name: "Food",
        data(){
            return {
                showFoodFlag:false
            }
        },
        props:{
            food:Object
        },
        components:{
            CartControl
        },
        methods:{
            toggle(){
                this.showFoodFlag=! this.showFoodFlag
            }
        }

    }
</script>

<style lang="stylus" scoped>
    @import  '../../assets/mixin.styl'
.food
    position:fixed
    left:0
    top:0
    bottom:0
    right:0
    width:100%
    z-index:101
    //background:red
    &.fade-enter,&.fade-leave-to
        opacity:0
    &.fade-enter-active,&.fade-leave-active
        transition:all 0.3s
    .content
        position:absolute
        z-index:66
        left: 50%
        top: 50%
        width: 80%
        transform:translate(-50%,-50%)
        background:#fff
        border-radius:0 0 5px 5px
        //margin-bottom:3rem
        .header_pic
            position:relative
            width: 100%
            img
                width:100%
                height:4rem
                display:block
            .desc
                position:absolute
                height:0.5rem
                line-height:0.5rem
                font-size:0.3rem
                width: 100%
                left:0
                bottom:0
                ellipsis()
                color:#fff
                //background:green
            .iconfont
                display:block
                position:absolute
                left:0
                top:0
                width:1rem
                height:1rem
                font-size:0.6rem
                line-height:1rem
                color:#248
        .text
            position relative
            padding:0.28rem
            .food_name
                height:0.6rem
                line-height:0.6rem
                font-size:0.4rem
                font-weight:600
            .sell_text
                font-size:0.3rem
            .color
                font-size: 0.3rem
                color:orangered
                padding-top:0.4rem
            .cartControl
                position:absolute
                height:0.4rem
                width:1.6rem
                right:0.4rem
                bottom:0.3rem
                //background:green
    .cover
        position:absolute
        z-index:50
        left:0
        top:0
        right:0
        bottom:0
        background:rgba(88,88,88,0.4)



</style>
